<template>
  <view class="container">
    <!-- 头部导航栏 -->
    <view class="nav-bar">
      <view class="back-icon">返回</view>
      <view class="title">在线客服</view>
    </view>
    <!-- 聊天记录区域 -->
    <view class="chat-record">
      <view class="record-item">
        <view class="record-time">2025-1-1 11:11</view>
        <view class="record-content">猜你想了解：</view>
      </view>
      <view class="record-item">
        <view class="record-content">酒店预订相关问题</view>
      </view>
      <view class="record-item">
        <view class="record-content">秒杀券相关问题</view>
      </view>
      <view class="record-item">
        <view class="record-content">好评返现相关问题</view>
      </view>
      <view class="record-item">
        <view class="record-content">订酒店请点这里</view>
      </view>
    </view>
    <!-- 输入框区域 -->
    <view class="input-section">
      <input type="text" placeholder="点击输入您的问题" disabled />
      <button disabled>提交</button>
    </view>
  </view>
</template>


<style>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}
.nav-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80rpx;
  background-color: #4cd964;
  color: white;
}
.back-icon {
  position: absolute;
  left: 20rpx;
}
.title {
  font-size: 32rpx;
}
.chat-record {
  margin-bottom: 20rpx;
  border: 1rpx solid #ccc;
  padding: 10rpx;
  height:800rpx;
  overflow-y: scroll;
}
.record-item {
  margin-bottom: 10rpx;

  
}
.record-time {
  color: #999;
  font-size: 24rpx;
margin-left: 130px;
margin-bottom: 50rpx;
margin-top: 50px;
}
.record-content {
  background-color: white;
  padding: 10rpx;
  border-radius: 5rpx;
}
.input-section {
  display: flex;
  align-items: center;
}
input {
  flex: 1;
  height: 60rpx;
  padding: 0 10rpx;
  border: 1rpx solid #ccc;
  border-radius: 5rpx 0 0 5rpx;
  background-color: #eee;
}
button {
  height: 64rpx;
  width: 120rpx;
  background-color: #0000ff;
  color: #1b1b1b;
  border: none;
  border-radius: 0 5rpx 5rpx 0;
  font-size: 30rpx
}
</style>